<template>
  <div class="hello">
    <PageHead title="组件通讯" />
    <div style="font-weight: bold">Store：</div>
    <div>vuex store的值：{{ initValue }}</div>
    <div>vuex getter的值：{{ getterStore }}</div>
    <div>
      <input id="input" type="text" />
      <button @click="storeChange">改变store的值</button>
    </div>
    <br />
    <br />
    <div style="font-weight: bold">$bus 事件总线：</div>
    <div>
      组件一: $bus的数据：{{ busValue }}
      <ComOne />
    </div>
    <br />
    <br />
    <div style="font-weight: bold">$parent 子组件访问父组件：</div>
    <div>
      <input id="parentInput" type="text" />
      <ComTwo />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
import ComOne from "./comOne.vue";
import ComTwo from "./comTwo.vue";
import PageHead from "@/components/PageHead.vue";
export default {
  components: {
    ComOne,
    ComTwo,
  },
  data() {
    return {
      busValue: "",
    };
  },
  created() {
    this.$bus.$on("busChange", (data) => {
      this.busValue = data;
    });
  },
  beforeDestroy() {
    this.$bus.$off("busChange");
  },

  computed: {
    ...mapState("home", ["initValue"]),
    ...mapGetters("home", ["getterStore"]),
  },
  methods: {
    ...mapActions("home", ["valueChangeAct"]),
    ...mapMutations("home", ["valueChange"]),
    storeChange() {
      const value = document.getElementById("input").value;
      this.valueChange(value);
    },
    getParentValue() {
      return document.querySelector("#parentInput").value;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
